<template>
  <!-- 智能制造平台  全部-->
  <el-card>
    <div class="proper_box">
      <div class="search">
        <el-form class="search_input" :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch"
          label-width="68px">
          <el-form-item class="search_input_item" label="BU:" prop="bu">
            <el-select v-model="queryParams.bu" filterable allow-create placeholder="请选择BU或者输入BU" clearable>
              <el-option v-for="(item, index) in buOptions" :key="index" :label="item"
                @keyup.enter.native="getSystemInfo" :value="item" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="search_input_item" label="系统查询" prop="sysName">
            <el-input v-model="queryParams.sysName" placeholder="请输入系统名称" clearable @keyup.enter.native="getSystemInfo"/>
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getSystemInfo" class="search_input_butt">查询</el-button>
        </el-form>
      </div>
      <!--  通过 为transition-group 元素，设置tag属性，指定transition-group 渲染为指定的元素，如果不指定tag属性，默认，渲染为 span 标签 -->
      <transition-group name="drag" class="proper_ul" tag="ul">
        <!-- dragstart(item)拖拽开始对象 -->
        <!-- 拖拽中dragenter(item, $event) -->
        <!-- dragend拖拽结束 -->
        <div @dragstart="dragstart(item)" @dragenter="dragenter(item, $event)" @dragend="dragend(item, $event)"
          :draggable="true" v-for="(item, index) in list" :key="item.li" class="proper_li">
          <div class="proper_img">
            <a class="proper_img_a" :href="item.sysUrl + '?IdToken=' + item.Token" target="_blank"
              v-on:click="doThis(item.Token)">
              <img ref="image" :src="item.imgPath" class="proper_img_a_img" />
            </a>
          </div>
          <div class="proper_title">
            <div class="proper_title_div">
              <!-- 网站标题 -->
              <div class="proper_title_div_title">{{ item.sysName }}</div>
              <div :class="item.isFavorites ? 'el-icon-star-on' : 'el-icon-star-off'"
                @click="collect1(index, item.Token)" ref="collect" class="proper_title_div_collect"></div>
            </div>
            <div class="proper_title_tag">
              <!-- 网站标签 -->
              <el-tag class="proper_title_tag_tata" type="success" v-for="tag in item.sysLabel" :key="tag.id">{{ tag }}
              </el-tag>
              <el-button class="proper_title_tag_butt" icon="el-icon-warning-outline" circle
                @click="handleClick(index)">
              </el-button>
            </div>
          </div>
        </div>
      </transition-group>
      <!-- 详情信息 -->
      <el-dialog :title="sysName" :visible.sync="dialogVisible" width="50%" center>
        <div>{{ description }}</div><br/>
        <el-table :data="usergridData">
          <el-table-column property="linkMan" label="姓名" width="100"></el-table-column>
          <el-table-column property="cellPhone" label="手机号" width="120"></el-table-column>
          <el-table-column property="duty" label="责任事项" width="100"></el-table-column>
          <el-table-column property="mail" label="邮箱" width="230"></el-table-column>
          <el-table-column property="cornet" label="短号" width="80"></el-table-column>
        </el-table><br/>
        <el-button class="probox_tag_outline_butt">
          <a :href="sop" :download="sop">
            <svg t="1646266400504" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="4431" width="20" height="20">
              <path d="M19.236571 955.245714s10.020571 25.892571 23.405715 0c0 0 149.357714-450.706286 513.462857-337.188571v139.922286s5.851429 82.285714 77.604571 28.672l357.814857-309.028572s75.922286-41.252571-4.534857-97.865143L625.152 68.900571s-54.418286-38.765714-67.584 24.868572l-0.438857 150.893714c0.146286 0.146286-678.473143 32.694857-537.892572 710.656z"
                p-id="4432" fill="#707070">
              </path>
            </svg>
            <span class="probox_tag_outline_span">sop下载</span>
          </a>
        </el-button>
      </el-dialog>
      <!-- 工号点击登录 -->
      <el-dialog :title="collectName" :visible.sync="collectdialogVisible" width="30%" height="40%" center>
        <div class="login">
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
            <h3 class="title">智能制造平台</h3>
            <el-button :class="li == tab ? 'bgc2' : 'bgc1'" type="info" style="border-radius: 0%;width: 356px;emargin-bottom: 27px;">域账号登录</el-button>
            <el-form-item prop="username" label-width="80px" :label="li === tab ? '工号' : '域账号'">
              <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="工号">
              </el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码" label-width="80px" v-if="tab">
              <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
                @keyup.enter.native="handleLogin">
              </el-input>
            </el-form-item>
            <el-form-item style="width: 100%">
              <el-button :loading="loading" size="medium" style="width: 20%;margin-left: 64px; "
                @click.native.prevent="handleLogin">
                <span v-if="!loading">登 录</span>
                <span v-else>登录中</span>
              </el-button>
              <el-button size="medium" style="width: 20%;margin-left: 15px" @click.native.prevent="lineLoginclose">关闭
              </el-button>
              <div v-show="isShow" style="width: 30%;margin-left: 22px;">
                <el-button type="success" plain style="position: absolute; right: 12px; top: -1px;"
                  @click.native.prevent="lineLogin">直接进入</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>
  </el-card>
</template>
<script>
// 引入收藏与查询接口
import {
  getquerySystemInfo,
  getaddFavorites,
  getverifyToken,
  getoptionValue,
} from "@/api/ssoapi/sso";
import Cookies from "js-cookie";
import {login,getCodeImg,getverifyEmpNo} from "@/api/login";
// 加密与解密的方法
import {encrypt,decrypt} from '@/utils/jsencrypt';

export default {
  name: "ssoindex",
  data() {
    return {
      // 登录搜索条件
      buttonIndex: 1,
      tab: true,
      li: false,
      codeUrl: "",
      // 个人信息
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
      },
      // 验证信息
      loginRules: {
        username: [
          {required: true,trigger: "blur",message: "请输入账号"}
        ],
        password: [
          {required: true,trigger: "blur",message: "请输入密码"}
        ],
        code: [
          {required: true,trigger: "change",message: "请输入验证码"}
        ],
      },
      loading: false,
      // 验证码开关
      captchaOnOff: true,
      // 注册开关
      register: false,
      redirect: undefined,
      // 查询登录結束
      // 显示搜索条件
      showSearch: true,

      dialogVisible: false,
      // 拖拽对象
      draging: null,
      // 目标对象
      target: null,
      show: true,
      // 默认不收藏
      isFavorites: false,

      // 系统ID
      sysId: '',
      // 系统名称
      sysName: '',
      // 系统标签
      sysLabel: '',
      // 系统类型
      sysType: '',
      disabled: false,

      description: '',
      // sop地址
      sop: '',
      imglist: [],
      // 总条数
      // 查询参数
      queryParams: {
        sysName: null,
        bu: null,
      },
      // 点击查询
      // 系统名称
      collectName: '',
      collectdialogVisible: false,

      // 表单校验
      rules: {
        bu: [
          {required: true, message: "BU不能为空", trigger: "blur"}
        ],
        registerId: [
          {required: true,message: "搜索条件不能为空",trigger: "blur"}
        ],
      },
      // 获取图片数据
      photourlData: "",
      buOptions: [],
      usergridData: [],
      list: [],
      dragIndex: "",
      enterIndex: "",
      isShow: false,
    };
  },
  // 登录后重定向到原先路由(带参数)
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    }
  },
  created() {
    // 获取查询BU下拉框
    this.getBuList();
    // 获取查询信息列表
    this.getSystemInfo();
    // 获取个人信息列表
    this.getCookie();
    var session = sessionStorage.getItem("sessionObj");
  },
  methods: {
    // 点击链接方法
    doThis(Token) {
      if(Token === "" || Token === undefined) {
        this.collectdialogVisible = true;
        this.isShow = true;
        var x = this.list;
        for(let i = 0; i < x.length; i++) {
          var x1 = x[i].sysUrl = "javascript:void(0);";
          this.list.push(x1);
        }
      }
    },
    // 查询BU下拉框
    getBuList() {
      this.loading = true;
      getoptionValue().then(response => {
        // console.log("测试加载",response);
        this.buOptions = response.data;
        this.loading = false;
      });
    },
    // 查询信息列表
    getSystemInfo() {
      let tempData = {
        "buNames": [],
        "isFavorites": "",
        "sysLabel": "",
        "sysName": "",
        "sysType": "",
      }

      if(this.queryParams.bu == null) {
        tempData.buNames == this.buOptions;
      }else {
        let buDATA = this.queryParams.bu;
        let arrayDATA = buDATA.split(",");
        tempData.buNames = arrayDATA;
      }

      if(this.queryParams.sysName == null) {
        tempData.sysName == this.sysName;
      }else {
        tempData.sysName = this.queryParams.sysName;
      }

      tempData.sysLabel = this.sysLabel;
      tempData.sysType = this.sysType;
      tempData.isFavorites = "0";

      let str = JSON.stringify(tempData);
      const checkId = Cookies.get("Admin-Token");
      console.log("测试",checkId);
      // RUOYI封装的请求方法
      getquerySystemInfo(str).then(response => {
        console.log("测试111",response.data);
        this.list = response.data;
        this.list.forEach((item, index) => {
          item['li'] = index;
          item['Token'] = checkId;
        });
      });
    },

    // 拖拽方法
    dragstart(value) {
      // console.log("测试拖拽开始",value);
      // 拖动的当前数据
      this.oldData = value;
    },

    // 记录移动过程中信息
    dragenter(value, e) {
      // 两条数据,拖动的数据,与交换的数据
      // console.log("测试拖拽开始移动过程中信息value",value);
      // 各个信息
      // console.log("测试拖拽开始移动过程中信息e", e);
      this.newData = value;
      // 各个信息组织冒泡
      e.preventDefault();
    },

    // 拖拽最终操作
    dragend(value, e) {
      if(this.oldData !== this.newData) {
        let oldIndex = this.list.indexOf(this.oldData);
        let newIndex = this.list.indexOf(this.newData);
        let newItems = [...this.list];
        // 删除老的节点
        newItems.splice(oldIndex, 1);
        // 在列表中目标位置增加新的节点
        newItems.splice(newIndex, 0, this.oldData);
        this.list = [...newItems];
        this.$nextTick(() => {
          this.imglist = this.list;
        });
      }
    },

    shuffle() {
      this.list = this.$shuffle(this.list);
    },

    // 点击星号收藏
    collect1(index, isToken) {
      if(isToken === "" || isToken === undefined) {
        this.collectdialogVisible = true;
        this.isShow = false;
      }else {
        this.list[index].isFavorites = !this.list[index].isFavorites;
        let collectData = {
          "sysId": "",
        }
        collectData.sysId = this.list[index].sysId;
        let str2 = JSON.stringify(collectData);
        if(this.list[index].isFavorites === false) {
          getaddFavorites(str2).then(response => {
            if(response.code === 200) {
              this.$notify({
                title: response.msg,
                message: response.msg,
                type: "success",
                offset: 100,
              });
              this.list[index].isFavorites = false;
              // this.list[index].isFavorites = true;
            }else {
              this.$notify.error({
                title: response.msg,
                message: response.msg,
                offset: 100,
              });
            }
          });
        }else if(this.list[index].isFavorites === true) {// 取消收藏false
          getaddFavorites(str2).then(response => {
            if(response.code === 200) {
              this.$notify({
                title: response.msg,
                message: response.msg,
                type: "success",
                offset: 100,
              });
              this.list[index].isFavorites = true;
            }else {
              this.$notify.error({
                title: "错误",
                message: response.msg,
                offset: 100,
              });
            }
          });
        }
      }
    },
    // 点击直接进入按钮
    lineLogin() {
      let photourlDatalist = this.photourlData;
      console.log("测试连接", photourlDatalist);
      // 页面跳转到登录页
      window.location.href = photourlDatalist;
    },
    // 点击 关闭按钮
    lineLoginclose() {
      this.collectdialogVisible = false;
    },
    // 验证码
    getCode() {
      getCodeImg().then(res => {
        this.captchaOnOff = res.captchaOnOff === undefined ? true: res.captchaOnOff;
        if(this.captchaOnOff) {
          // 把返回的图片拼接base64编码的gif图片数据
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    // 校验Cookie身份信息
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe');
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        // 对password进行加密
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
      };
    },
    // 获取登录方法
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if(valid) {
          this.loading = true;
          if(this.loginForm.password) {
            // Cookies有效期30天
            Cookies.set("username",this.loginForm.username,{expires: 30});
            Cookies.set("password",encrypt(this.loginForm.password),{expires: 30});
          }else {
            Cookies.remove("username");
            Cookies.remove("password");
          }
          // VUEX状态管理中获取请求信息
          this.$store.dispatch('Login', this.loginForm).then(() => {
            console.log("测试重定向",thisredirect);
            this.$router.push({path: this.redirect || "/"}).catch(() => {});
          }).catch(() => {
            this.loading = false;
            if(this.captchaOnOff) {
              this.getCode();
            }
          });
        }
      });
    },
    // 详细信息的方法
    handleClick(index) {
      console.log("测试handleClick",index);
      this.dialogVisible = true;
      console.log("测试list",this.list);
      this.sysName = this.list[index].sysName;
      console.log("测试11",this.sysName);
      this.usergridData = this.list[index].linkMan;
      console.log("测试描述",this.usergridData);
      this.sop = this.list[index].sopUrl;
      this.description = this.list[index].description;
    },
    // 下载方法
    download(sop) {
      window.open(sop);
    },
  },
};
</script>

<style scoped>
* {
  padding: 0px;
  margin: 0px;
}
.search_input_item {
  margin-right: 30px;
}
.search_input {
  width: 100%;
  height: 60px;
  margin: 16px;
}
.search_input_item {
  margin-right: 30px;
}
.search_input_butt {
  padding: 12px 20px;
}
.proper_box {
  margin: 20px 20px 0px 10px;
}
.proper_ul {
  display: flex;
  flex-direction: column;
  flex-flow: wrap;
  align-content: flex-start;
}
.proper_li {
  width: 280px;
  height: 320px;
  margin: 30px 30px 20px 30px;
  border: 1px solid rgb(149, 149, 149);
  border-radius: 5px;
}
.proper_li:hover {
  box-shadow: 1px 5px 20px 3px rgba(149, 149, 149, 0.3);
}
.proper_img {
  width: 280px;
  height: 220px;
}
.proper_img_a {
  width: 278px;
  height: 220px;
  border-radius: 5px;
}
.proper_img_a_img {
  width: 278px;
  height: 220px;
  border-radius: 5px;
}
.proper_title {
  width: 278px;
  height: 100px;
}
.proper_title_div {
  width: 98%;
  height: 55px;
  margin: 3px 0px 3px 5px;
  position: relative;
}
.proper_title_div_title {
  position: absolute;
}
.proper_title_div_collect {
  position: absolute;
}
.el-icon-star-on {
  cursor: pointer;
  margin: 27px 0px 0px 245px;
  font-size: 27px;
}
.el-icon-star-off {
  cursor: pointer;
  margin: 25px 0px 0px 240px;
  font-size: 27px;
}
.el-icon-star-on:hover {
  animation-name: star1;
  animation-duration: 2s;
}
.el-icon-star-off:hover {
  animation-name: star1;
  animation-duration: 2s;
}

@keyframes star1 {
  0% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1.2);
  }
}
.proper_title_tag {
  width: 100%;
  height: 35px;
  margin: 5px 0px 0px 2px;
  position: relative;
}
.proper_title_tag_tata {
  margin-right: 5px;
  padding: 0px 7px;
}
.proper_title_tag_butt {
  width: 1px;
  height: 1px;
  margin: 0px 27px;
  padding: 0px;
  font-size: 27px;
  position: absolute;
  top: 5px;
  right: 3px;
}
.el-icon-warning-outline {
  font-size: 27px;
}
.probox_tag_outline_butt {
  margin: 10px;
  padding: 10px;
}
.probox_tag_outline_span {
  margin: 3px;
  padding: 3px;
}
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-size: cover;
  color: black;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #070707;
}
.login-form {
  border-radius: 6px;
  background: #dbdada;
  width: 400px;
  padding: 25px 25px 5px 25px;

}
.input-icon {
  height: 39px;
  width: 14px;
  margin-left: 2px;
}
.el-input {
  height: 38px;
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #050404;
}
.login-code {
  width: 33%;
  height: 38px;
  float: right;
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: rgb(8, 8, 8);
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 38px;
}
.bgc1 {
  background-color: #050404;
  color: white;
  border: 0;
  margin-left: 0px !important;
}
.bgc2 {
  background-color: #ffffff;
  color: rgb(10, 10, 10);
  border: 0;
  margin-left: 0px !important;

}
</style>
